<template>
  <div class="person-box">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      :loading-text="loadingword"
      :immediate-check="false"
      @load="onLoad"
      :offset="50"
    >

    <div class="skeleton-style-person" v-if="loadings">
      <div class="skeleton-style1-person">
          <van-skeleton :row="6" :loading="loadings"></van-skeleton>
        </div>
        <div class="skeleton-style2-person">
          <van-skeleton :row="6" :loading="loadings"></van-skeleton>
        </div>
      </div>

    <div class="person-message-list clear" v-if="!loadings">
      <div class="person-image-box float-left">
        <img :src="personData.avatar" alt="">
      </div>
      <div class="person-name-other float-left">
        <div class="person-name">{{personData.nick_name}}</div>
        <div class="person-more" v-if="personData.user_id">等级：青铜</div>
      </div>

    </div>
      <!-- <div class="person-message-box">
        <div class="person-market">我的发布</div>
      </div> -->
      <div class="person-market-box" v-if="!loadings">
        <div class="person-market" v-for="(list, index) in themeListata" :key="index">
          <div class="market-img">
            <img :src="address + list.imageList[0].iamge" alt>
          </div>
          <div class="market-detali">
            <div class="market-title">{{list.theme_title}}</div>
            <!-- <div class="market-status">状态:{{list.theme_status === '1' ? "进行中" : "已关闭"}}</div> -->
            <div class="market-type">类型: {{list.trade_type}}</div>
            <button
              type="button"
              class="market-deleta project-button"
              @click="deleteTheme(list.theme_id, index)"
            >删除</button>

            <div class="person-change-status">
              <van-dropdown-menu>
                <van-dropdown-item v-model="list.theme_status" :options="option1"
                 @change="changeStatus(list.theme_status, index, list.theme_id)"/>
              </van-dropdown-menu>
            </div>
          </div>
        </div>
      </div>
    </van-list>
    <v-footer></v-footer>
  </div>
</template>
<script>
import { selectThemeList, deleteThemeList, changeThemeStatus, selectPersonMess } from "../../api/api.js";
import { mapState, mapMutations, mapGetters, mapActions } from "vuex";
import { Notify, List, DropdownMenu, DropdownItem, Skeleton } from "vant";
import footer from "../footer/footer.vue";
export default {
  components: {
    [Notify.name]: Notify,
    [List.name]: List,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    'v-footer':footer,
    [Skeleton.name]: Skeleton
  },
  data() {
    return {
      creator_Id: "",
      areaCodeNum: 1, //区域号
      loading: false,
      finished: false,
      startPage: 0,
      loadingword: "加载中...",
      themeListata: [],
      allPageNum: 0,
      value1: 1,
      option1: [{ text: "交易中", value: '1' }, { text: "已关闭", value: '2' }],
      personData: {},
      address: staturl.staturl,
      loadings: true
    };
  },
  computed: {
    ...mapState(["areaCode", "creator"])
  },
  created() {
    if (this.areaCode) {
      this.areaCodeNum = this.areaCode.area_Code;
    }

    if (this.creator) {
      this.creator_Id = this.creator;
    }
    // 查询市场列表
    this.themeList();
    // 查询个人信息
    this.selectPerson();
  },

  methods: {
    // 查询主题列表
    themeList() {
      let paramObj = {
        startPage: this.startPage,
        pageNumData: 8,
        area_Code: this.areaCodeNum,
        isSelf: true,
        userId: this.creator_Id
      };
      selectThemeList(paramObj).then(res => {
        this.loading = false;
        this.loadings = false;
        if (res.data.checkCode === 'PRO-920') {
          let list = res.data.result.result;
          let listArr = [];
          list.forEach((res, index) => {
            if (res.imageList.length > 0) {
               listArr.push(res)
            }
          })
          this.themeListata = this.themeListata.concat(listArr);
          this.allPageNum = res.data.result.paginationMess;
        } else {
           Notify({
            message: "系统繁忙，请稍后再试",
            duration: 2000,
            background: "#1989fa"
          });
        }
      });
    },

    // 查询个人信息
    selectPerson() {
      let paramObj = {
        openId: this.creator_Id
      }
      selectPersonMess(paramObj).then(res => {
        if (res.data.checkCode === 'PRO-920') {
          this.personData = res.data.result;
        }

      })
    },
    onLoad() {
      this.loading = true;
      setTimeout(() => {
        this.startPage++;
        this.finished = false;
        this.themeList();
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.startPage + 2 > Math.ceil(this.allPageNum.allCount / 8)) {
          this.finished = true;
        }
      }, 1000);
    },

    // 改变订单状态
    changeStatus(status, index, themeId) {
      this.changeTheme(status, index, themeId);
    },

    // 修改主题列表状态
    changeTheme(status, index, themeId) {
      let paramObj = {
        status: status,
        themeId: themeId,
      }
      changeThemeStatus(paramObj).then(res => {
        if (res.data.status === "success") {
          Notify({
            message: "状态更改成功",
            duration: 2000,
            background: "#1989fa"
          });
        } else {
          Notify({
            message: "状态更改失败",
            duration: 2000,
            background: "#1989fa"
          });
        }

      })
    },

    // 删除主题列表
    deleteTheme(theme_id, index) {
      let paramObj = {
        userId: this.creator_Id,
        themeId: theme_id
      };
      deleteThemeList(paramObj).then(res => {
        if (res.data.status === "success") {
          Notify({
            message: "删除成功",
            duration: 2000,
            background: "#1989fa"
          });
          this.themeListata.splice(index, 1);
        } else {
          Notify({
            message: "删除失败",
            duration: 2000,
            background: "#1989fa"
          });
        }
      });
    },

    // 删除团队列表
    deleteTeam(business_Id, team_Id, index) {
      let paramObj = {
        creator_Id: this.creator_Id,
        business_Id: business_Id,
        team_Id: team_Id
      };
      deleteTeam(paramObj).then(res => {
        if (res.data.status === "success") {
          Notify({
            message: "删除成功",
            duration: 2000,
            background: "#1989fa"
          });
          this.groupList.splice(index, 1);
        } else {
          Notify({
            message: "删除失败",
            duration: 2000,
            background: "#1989fa"
          });
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.person-message-list {
  width: 100%;
  font-size: 0.4rem;
  padding: 0.7rem 0.5rem 0.2rem 0.5rem;
  position: fixed;
  top: 0rem;
  background: #ffffff;
  z-index: 999999999;
  border-bottom: 1px solid #a28a8a;
  .person-image-box {
    img {
      height: 1.5rem;
      border-radius: 0.12rem;
    }

  }
  .person-name-other {
    padding: 0.12rem 0rem;
    margin-left: 0.3rem;
    .person-name {
      font-weight: bold;
    }
    .person-more {
      margin-top: 0.3rem;
      font-size: 0.35rem;
    }

  }

}
.person-box {
  padding-top: 0.2rem;
  padding-bottom: 2rem;
}
.person-message-box {
  width: 100%;
  font-size: 0.3rem;
  text-align: center;
  background: #ffffff;
  .person-market {
    line-height: 1rem;
    border: 1px solid #f5f5f5;
  }
}


.person-market-box {
  font-size: 0.3rem;
  margin-top: 2.5rem;
  .person-market {
    display: flex;
    margin-top: 0.5rem;
    padding: 0.3rem 0.2rem;
    background: #ffffff;
    box-shadow: 0 0 6px rgba(207,216,221,.2), 0 4px 6px rgba(207,216,221,.2);
    .market-img {
      flex: 0.5;
      height: 1.9rem;
      img {
        width: 100%;
        height: 100%;
        border-radius: 0.12rem;
      }
    }
    .market-detali {
      flex: 1;
      width: 100%;
      padding: 0rem 0.2rem;
      .market-title {
        font-size: 0.4rem;
        font-weight: bold;
        width: 6rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .market-status {
      }
      .market-type {
        font-size: 0.3rem;
        margin-top: 0.1rem;
      }
      .market-deleta {
        width: 2rem;
        height: 0.62rem;
        float: right;
        text-align: center;
        line-height: 0.62rem;
        border-radius: 0.12rem;
        border: 1px solid #a28a8a;
        margin-top: 0.1rem;
      }
    }
  }
}
.person-change-status {
  margin-top: 0.1rem;
}
.active {
  background: #f5f5f5;
}
</style>


